<template>
	<view class="container">
		<view class="icon-box" v-if="model.status==1">
			<text class="icon iconfont icon-time"></text>
			<text class="tit">支付未完成</text>
		</view>
		<view class="icon-box" v-else-if="model.status==2">
			<text class="icon iconfont icon-check-full"></text>
			<text class="tit">支付成功</text>
		</view>
		<view class="icon-box" v-else>
			<text class="icon iconfont icon-close"></text>
			<text class="tit">交易已取消</text>
		</view>
		<view class="btn-group">
			<navigator url="../account/recharge/list" class="btn" v-if="model.tradeType==1">查看订单</navigator>
			<navigator url="../order/list" class="btn" v-else>查看订单</navigator>
			<navigator url="../account/index" open-type="switchTab" class="btn hollow">会员中心</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {}
			}
		},
		methods: {
			//加载订单信息
			async initData(no){
				let _this = this;
				await _this.$api.request({
					url: `/account/order/collection/${no}`,
					loading: true,
				}).then(res=>{
					_this.model = res.data;
				});
			},
		},
		onLoad(options) {
			this.initData(options.no);
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.icon-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.icon{
			color: #67C23A;
			font-size: 160rpx;
			margin-top: 100rpx;
		}
		.tit{
			color: #303133;
			font-size: 38rpx;
		}
	}
	.btn-group{
		padding: 100rpx 60rpx;
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			height: 80rpx;
			font-size: 32rpx;
			color: #fff;
			background-color: #409EFF;
			border-radius: 80rpx;
			&.hollow{
				background: #fff;
				color: #303133;
				border: 2rpx solid #ccc;
			}
		}
	}
</style>
